<template>
  <div class="my">
    <div class="header" @click="routerUserInfo">
      <div class="user-log">
        <img :src="imgurl" />
      </div>
      <div class="user-dec">
        <h2>{{ userNickName }}</h2>
        <div class="user-id">
          <span>{{ userPhone }}</span>
          <van-icon name="arrow" color="rgb(107,107,107)" />
        </div>
      </div>
    </div>
    <div class="status">
      <span>+状态</span>
      <span>等5个朋友</span>
    </div>

    <div class="one-cell">
      <i><img src="../../assets/image/discover-img/my1.png" alt="" /></i>
      <div class="text" @click="$router.push('/check')"> 
        <p>服务</p>
        <van-icon name="arrow" color="rgb(107,107,107)" />
      </div>
    </div>

    <div class="five-cell">
      <div class="cell">
        <i><img src="../../assets/image/discover-img/my2.png" alt="" /></i>
        <div class="text">
          <p>收藏</p>
          <van-icon name="arrow" color="rgb(107,107,107)" />
        </div>
      </div>
      <div class="cell">
        <i><img src="../../assets/image/discover-img/my3.png" alt="" /></i>
        <div class="text">
          <p>朋友圈</p>
          <van-icon name="arrow" color="rgb(107,107,107)" />
        </div>
      </div>
      <div class="cell">
        <i><img src="../../assets/image/discover-img/my4.png" alt="" /></i>
        <div class="text">
          <p>视频号</p>
          <van-icon name="arrow" color="rgb(107,107,107)" />
        </div>
      </div>
      <div class="cell">
        <i><img src="../../assets/image/discover-img/my5.png" alt="" /></i>
        <div class="text">
          <p>卡包</p>
          <van-icon name="arrow" color="rgb(107,107,107)" />
        </div>
      </div>
      <div class="cell">
        <i><img src="../../assets/image/discover-img/my6.png" alt="" /></i>
        <div class="text">
          <p>表情</p>
          <van-icon name="arrow" color="rgb(107,107,107)" />
        </div>
      </div>
    </div>
    <!-- 设置 -->
    <div class="one-cell" @click="routerSetup">
      <i><img src="../../assets/image/discover-img/my7.png" alt="" /></i>
      <div class="text">
        <p>设置</p>
        <van-icon name="arrow" color="rgb(107,107,107)" />
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import WebIM from "../../utils/WebIM";
export default {
  data() {
    return {
      imgurl: require("../../assets/image/images/default_hd_avatar.png"),
      userNickName: "用户",
    };
  },
  computed: {
    ...mapState({
      userPhone: (state) => state.login.userId,
      userPic: (state) => state.user.userPic,
      nickName: (state) => state.user.nickName,
    }),
  },
  created() {
    if (this.userPic != "") {
      this.imgurl = this.userPic;
    }
    if (this.nickName != "") {
      this.userNickName = this.nickName;
    }
  },
  watch: {
    userPic(newV) {
      this.imgurl = newV;
      return newV;
    },
    nickName(newV) {
      this.userNickName = newV;
      return newV;
    },
  },
  methods: {
    routerSetup() {
      this.$router.push({
        name: "setUp",
        params: {
          imgurl: this.imgurl,
          userNickName: this.userNickName,
          userPhone: this.userPhone,
        },
      });
    },
    routerUserInfo() {
      this.$router.push({
        name: "userInfo",
        params: {
          imgurl: this.imgurl,
          userNickName: this.userNickName,
          userPhone: this.userPhone,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.my {
  color: white;
  width: 100vw;
  height: 100vh;
  background: var(--theme-background-black);
  .header {
    display: flex;
    height: 80px;
    background: var(--theme-cell-black);
    padding-top: 20px;
    margin: 0px 0px 0 20px;
    .user-log {
      flex: 0 0 50px;
      width: 50px;
      height: 50px;
      border-radius: 10px;
      img {
        width: 100%;
        border-radius: 10px;
      }
    }
    .user-dec {
      margin-left: 15px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: 1;
      height: 50px;
      .user-id {
        margin-top: 5px;
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        padding-right: 10px;
        color: rgb(229, 234, 238, 0.5);
      }
    }
  }
  .status {
    background: var(--theme-cell-black);
    height: 30px;
    padding-bottom: 10px;
    text-align: center;
    span {
      display: inline-block;
      border: 1px solid rgb(47 42 42);
      border-radius: 5px;
      padding: 2px;
      font-size: 12px;
      color: rgb(229, 234, 238, 0.5);
      &:nth-child(1) {
        margin-right: 8px;
      }
    }
  }

  .one-cell {
    display: flex;
    align-items: center;
    margin-top: 10px;
    background: var(--theme-cell-black);
    height: 44px;
    font-weight: 300;
    padding-left: 2px;
    i {
      width: 34px;
      text-align: center;
      line-height: 34px;
      height: 34px;
      padding: 2px;

      img {
        width: 100%;
      }
    }
    .text {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      p {
        //   line-height: 44px;
        margin-left: 10px;
      }
      .van-icon-arrow {
        padding: 0;
      }
    }
  }

  .five-cell {
    margin-top: 10px;
    .cell {
      display: flex;
      align-items: center;
      background: var(--theme-cell-black);
      height: 44px;
      font-weight: 300;
      padding-left: 2px;
      i {
        width: 34px;
        text-align: center;
        line-height: 34px;
        height: 34px;
        padding: 2px;
        img {
          width: 100%;
        }
      }
      .text {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgb(47 42 42);
        p {
          margin-left: 10px;
        }
        .van-icon-arrow {
          padding: 0;
        }
      }
    }
  }
}
</style>